<template>
  <el-dialog
    :visible="visible"
    @close="handleClose"
    :title="$t('developer.select_check_assist')"
    width="60%"
  >
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      @current-change="currentChangeHandle"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageIndex"
    >
      <el-form class="p-4" inline>
        <el-form-item>
          <el-input
            maxlength="64"
            v-model="condition"
            @blur="() => (condition = condition.trim())"
            :placeholder="$t('user.query_condition')"
            clearable
            @clear="fetchData"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="fetchData((pageIndex = 1))">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        :show-overflow-tooltip="true"
        highlight-current-row
        v-loading="listLoading"
        @current-change="handleCurrentChange"
        :data="tableData"
      >
        <el-table-column prop="username" :label="''" width="80">
          <template v-slot="scope">
            <el-radio
              v-model="selectUsername"
              :label="scope.row.username"
              @change="selectManager(scope.row)"
              >{{ "" }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column :label="$t('user.username')" prop="username" />
        <el-table-column :label="$t('user.user_type')" prop="characterCode" />
        <el-table-column :label="$t('user.contact_name')" prop="name" />
        <el-table-column :label="$t('merchant.mobile')" prop="mobile" />
      </el-table>
    </el-card>
    <template #footer>
      <span class="dialog-footer">
        <el-button text @click="handleClose">{{ $t("common.cancel") }}</el-button>
        <el-button
          type="primary"
          :loading="addCheckAssistLoading"
          @click="addCheckAssistHandle"
          >{{ $t("common.confirm") }}</el-button
        >
      </span></template
    >
  </el-dialog>
</template>

<script>
import { formatDate } from "@/utils/formatDate";
import { getUserPage, queryCheckAssist, saveCheckAssist } from "@/api";

export default {
  data() {
    return {
      visible: false,
      loginUserId: "",
      developerId: "",
      checkAssistUserId: "",
      checkAssistUsername: "",
      confirmLoading: false,
      addCheckAssistVisible: false,
      addCheckAssistLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      tableData: [],
      listLoading: false,
      condition: "",
      selectUsername: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    init(developerId) {
      this.developerId = developerId;
      this.visible = true;
      const userInfo = JSON.parse(
        localStorage.getItem(this.$store.getters.keys.storage.username)
      );
      this.loginUserId = userInfo.userId;
      this.fetchData();
    },
    cancel() {
      this.visible = false;
      this.$emit("close");
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.fetchData();
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.fetchData();
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf();
      return formatDate(cellValue, fmt);
    },
    fetchData() {
      this.listLoading = true;
      getUserPage({
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
        status: "1",
        condition: this.condition,
      })
        .then((res) => {
          this.listLoading = false;
          this.tableData = res.data;
          this.totalPage = res.rows;
        })
        .catch((e) => {
          this.listLoading = false;
        });
    },
    handleClose() {
      this.checkAssistUserId = "";
      this.checkAssistUsername = "";
      this.developerId = "";
      this.visible = false;
      this.confirmLoading = false;
    },
    addCheckAssistHandle() {
      if (!this.checkAssistUserId) {
        this.$message.warning(this.$t("developer.select_check_assist_tip"));
        return;
      }

      this.$confirm(
        this.$t("developer.confirm_check_assist_tip", {
          manager: this.checkAssistUsername,
        }),
        "",
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      ).then(() => {
        const entity = {
          checkAssistUserId: this.checkAssistUserId,
          developerId: this.developerId,
        };
        this.addCheckAssistLoading = true;
        saveCheckAssist(entity)
          .then((data) => {
            if (data) {
              this.addCheckAssistLoading = false;
              this.addCheckAssistVisible = false;
              this.checkAssistUserId = "";
              this.checkAssistUsername = "";
              this.developerId = "";
              this.$message.success(this.$t("common.operate_success"));
              this.visible = false;
            }
          })
          .catch((e) => {
            this.$confirmError(e);
            this.addCheckAssistLoading = false;
          })
          .finally(() => {
            this.addCheckAssistLoading = false;
          });
      });
    },
    cancelCheckAssistHandle() {
      this.addCheckAssistVisible = false;
      this.checkAssistUserId = "";
      this.checkAssistUsername = "";
      this.developerId = "";
    },
    updateHandle(id) {},
    handleCurrentChange(val) {
      this.selectUsername = "";
      this.checkAssistUserId = "";
      if (val) {
        if (this.loginUserId === val.userId) {
          // this.$message.warning(this.$t('developer.select_self_check_assist_tip'))
          return;
        }
        const entity = {
          userId: val.userId,
          developerId: this.developerId,
        };
        queryCheckAssist(entity)
          .then((data) => {
            if (data) {
              this.selectUsername = "";
              this.$message.warning(this.$t("developer.select_repeat_check_assist_tip"));
              return;
            }
          })
          .catch((e) => {
            this.$confirmError(e);
          });
        this.checkAssistUserId = val.userId;
        this.checkAssistUsername = val.username;
        this.selectUsername = val.username;
      }
    },
    selectManager(row) {
      if (this.loginUserId === row.userId) {
        this.selectUsername = "";
        this.$message.warning(this.$t("developer.select_self_check_assist_tip"));
        return;
      }
      const entity = {
        userId: row.userId,
        developerId: this.developerId,
      };
      queryCheckAssist(entity)
        .then((data) => {
          if (data) {
            this.selectUsername = "";
            this.$message.warning(this.$t("developer.select_repeat_check_assist_tip"));
            return;
          }
        })
        .catch((e) => {
          this.$confirmError(e);
        });
      this.checkAssistUserId = row.userId;
    },
  },
};
</script>
